<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Planning de X</title>

<link rel='stylesheet' type='text/css' href='<%=request.getContextPath()%>/css/planning.css' />
<link rel='stylesheet' type='text/css' href='<%=request.getContextPath()%>/js/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='<%=request.getContextPath()%>/js/fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='<%=request.getContextPath()%>/js/jquery/jquery-1.8.1.min.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/jquery/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/fullcalendar/fullcalendar.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/fullcalendar/jquery.qtip-1.0.0-rc3.js'></script>

<script type='text/javascript'>

	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		alert(y + "," + m + "," + d);
		var calendar = $('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			allDaySlot: false,
			axisFormat: 'H:mm',
			slotMinutes: 15,
			defaultEventMinutes: 60,
			firstHour: 8,
			minTime: 8,
			maxTime: 22,
			columnFormat: {
							month: 'ddd',    // Mon
							week: 'ddd d MMM', // Mon 9/7
							day: 'dddd d MMMM'  // Monday 9/7
						},
			titleFormat: {
							month: 'MMMM yyyy',                             // September 2009
							week: "d [MMMM] [ yyyy]{ 'au 'd  MMMM yyyy}", // Sep 7 - 13 2009
							day: 'dddd d MMM yyyy'                  // Tuesday, Sep 8, 2009
						},
			timeFormat: 'H:mm',
			selectable: true,
			selectHelper: true,
			editable: true,
			aspectRatio: 1.5,
			
			// Lors d'une selection de crenau
			select: function(start, end, allDay) {
				$.ajax({
	                url: 'creerSession.jsp',
	                success: function(data){
	                    $('#dialog-modal-NewEvent').html(data);
	                    $('#dialog-modal-NewEvent').dialog({
	                   	 	resizable: false,
	                        modal: true,
	                        width: 'auto',
	                        buttons: [
	             				{
	             					text: "Annuler",
	             					click: function() {
	             						$( this ).dialog( "close" );
	             					}
	             				}
	             			]
	        		     }); 
	                }
	       	 		});
				
				calendar.fullCalendar('unselect');
			},
			
			// Remplacer le div rendered
			eventRender: function(event, element) {
			
				if(event.notePerso != null){
					element.qtip({
						content: event.notePerso,
						style: { 
						  padding: 5,
						  background: '#ffffcc',
						  color: 'black',
						  textAlign: 'center',
						  border: {
							 width: 1,
							 radius: 3,
							 color: '#A2D959'
						  },
						  tip: 'topLeft',
						  name: 'dark', // Inherit the rest of the attributes from the preset dark style
					   },
					   hide: { when: { event: 'unfocus' } }
					});
				}
				
				var view = $('#calendar').fullCalendar('getView'); // get la vue, donc soit Month / Week / Day
				
				if(view.name != 'month'){
				
					if(event.matiere != null){
						divMatiere = document.createElement("div");
						if(event.niveau != null){
							divMatiere.innerHTML = event.matiere + ' (' + event.niveau + ')'; //Peut contenir de l'html
						}else{
							divMatiere.innerHTML = event.matiere; 
						}
						element[0].getElementsByClassName('fc-event-content')[0].appendChild(divMatiere);
						//alert(element[0].getElementsByClassName('fc-event-title')[0].innerHTML);
					}
				}
				
			},
			
			// Lors d'un clic sur le block
			eventClick: function(calEvent, jsEvent, view) {

				// change the border color just for fun
				$(this).css('border-color', 'red');
				$.ajax({
	                url: 'creerSession.jsp',
	                success: function(data){
	                    $('#dialog-modal-NewEvent').html(data);
	                    $('#dialog-modal-NewEvent').attr('title', thisTag);
	                    $('#dialog-modal-NewEvent').dialog({
	                   	 	resizable: false,
	                        modal: true,
	                        width: 'auto',
	                        buttons: [
	             				{
	             					text: "Annuler",
	             					click: function() {
	             						$( this ).dialog( "close" );
	             					}
	             				}
	             			]
	        		     }); 
	                }
	       	 		});

			},
			
			events: [

			        <c:forEach items="${Sessions}" var="item" varStatus="loop">  
			        {
				       		id_serie: '${item.id_serie}',
							title: '${item.eleve}',
							eleve: '${item.eleve}',
							matiere: '${item.matiere}',
							niveau: '${item.niveau}', 
							start: ${item.dateDebut},
							end: ${item.dateFin},
							notePerso: 'Cet eleve est toujours en retard ! \n Probleme de concentration',
							allDay: false 
				        }, 
			        </c:forEach> 
				        
					{
						title: 'Valentin Mayo',
						start: new Date(y, m, d, 12, 0),
						end: new Date(y, m, d, 14, 0),
					}
			
			]
			
					
		});
	});

</script>
<style type='text/css'>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}

	#calendar {
		width: 900px;
		margin: 0 auto;
		}

</style>

</head>
<body>

<h1> ${Sessions.size()} </h1>
<div id='calendar'></div>

<div style='display:none'>
	    <div id="dialog-modal-NewEvent">
	    	<center></center>
	    </div>
</div>
	 
	 
</body>
</html>

<!-- 
if (title) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
				}
				 -->